import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElButton,
  ElIcon,
  ElMessage,
  ElInputNumber
} from 'element-plus'
import { EditPen } from '@element-plus/icons-vue'
import { GUTTER, SPAN_STYLE_DOUBLE } from '~/utils/const'
import type { FormInstance } from 'element-plus'
import type { WorkSetType, WorkSetPropsType } from './typings'

export default defineComponent({
  name: 'ConnectSet',
  props: ['visible', 'record'],
  emits: ['cancel'],
  setup(props: WorkSetPropsType, { emit }) {
    const store = useStore()
    const router = useRouter()
    const ruleFormRef = ref<FormInstance>()
    const formValues = reactive<WorkSetType>({})

    // 关闭弹框事件回调
    const handleCloseModal = () => {
      emit('cancel')
    }

    // 提交表单
    const handleSubmitForm = () => {
      const { id } = router.currentRoute.value.query
      if (!ruleFormRef.value) return
      ruleFormRef.value.validate(async (valid) => {
        if (!valid) return
        const params = { ...formValues, id }
        const res = await store.dispatch('equipment/UpdateWorkPut', params)
        if (res?.code === 200) {
          ElMessage({ type: 'success', message: '操作成功' })
          handleCloseModal()
        }
      })
    }

    onMounted(() => {
      Object.assign(formValues, props.record)
    })

    return () => {
      const { visible } = props
      return (
        <ElDialog
          title="工作参数"
          modelValue={visible}
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={handleCloseModal}
          v-slots={{
            footer: () => (
              <>
                <ElButton type="primary" onClick={handleSubmitForm}>
                  <ElIcon>
                    <EditPen />
                  </ElIcon>
                  &nbsp; 确定
                </ElButton>
                <ElButton onClick={handleCloseModal}>取消</ElButton>
              </>
            )
          }}
        >
          <ElForm label-width="150px" ref={ruleFormRef} model={formValues}>
            <ElRow gutter={GUTTER}>
              <ElCol {...SPAN_STYLE_DOUBLE}>
                <ElFormItem
                  prop="beatUpTime"
                  label="心跳上报间隔(分)"
                  rules={[{ required: true, message: '请输入心跳上报间隔(分)' }]}
                >
                  <ElInputNumber
                    v-model={formValues.beatUpTime}
                    controls-position="right"
                    placeholder="请输入心跳上报间隔(分)"
                  />
                </ElFormItem>
              </ElCol>
              <ElCol {...SPAN_STYLE_DOUBLE}>
                <ElFormItem
                  prop="workUpTime"
                  label="工况上报间隔(分)"
                  rules={[{ required: true, message: '请输入工况上报间隔(分)' }]}
                >
                  <ElInputNumber
                    v-model={formValues.workUpTime}
                    controls-position="right"
                    placeholder="请输入工况上报间隔(分)"
                  />
                </ElFormItem>
              </ElCol>
            </ElRow>
          </ElForm>
        </ElDialog>
      )
    }
  }
})
